<template>
  <div class="home" id="home">
    <!-- <router-view></router-view> -->
    <Map ref="map" />
    <div class="funcArea">
      <div class="left">
        <img
          class="img"
          v-show="curID"
          src="../../assets/img/Home/预警提示.png"
          alt
        />
        <div class="font" v-show="curID">
          传感器
          <div class="alert">{{ curID }}</div>
          状态异常请尽快处理
        </div>
      </div>
      <div class="right">
        <div class="searchContainer" v-if="searchActive">
          <img src="../../assets/img/Home/搜索背景切图.png" alt />
          <input
            type="number"
            min="1"
            max="10000"
            class="inputLable"
            placeholder="请输入传感器ID"
            v-model="sorId"
          />
          <div class="title-search-word">
            <div class="title-but" @click="getData">搜索</div>
            <!-- <div  class="title-but" @click="resetData">重置</div> -->
            <div class="title-but" v-if="sorId" @click="resetData()">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
        <div class="search" @click="searchFoldHandler">
          <img
            :src="
              require(`../../assets/img/Home/${
                searchActive ? '搜索2' : '搜索1'
              }.png`)
            "
            alt
          />
        </div>
        <!-- <div class="fold" @click="foldHandler">
          <img
            :src="
              require(`../../assets/img/Home/${flod ? '打开2' : '打开1'}.png`)
            "
            alt
          />
        </div> -->
        <div class="statistics" @click="statisticsActive = !statisticsActive">
          <img
            :src="
              require(`../../assets/img/Home/${
                statisticsActive ? '图表打开按钮2' : '图表打开按钮'
              }.png`)
            "
            alt
          />
        </div>
      </div>
    </div>
    <div class="table-container" v-if="flod">
      <home-table @handleClose="handleClose"></home-table>
    </div>
    <Transition name="statistics">
      <StatisticsSenor v-show="statisticsActive" />
    </Transition>
  </div>
</template>

<script>
import Map from "./components/OneMap/OneMap.vue";
import HomeTable from "./homeTable.vue";
import { sensorList, alarmData } from "@/api/data/home";
import StatisticsSenor from "./components/Statistics/StatisticsSenor";
import { listener } from "@/utils/listener";

let intervalKey, intervalKey1;

export default {
  name: "home",
  components: { Map, HomeTable, StatisticsSenor },
  data() {
    return {
      searchActive: false,
      flod: false,
      statisticsActive: false, //統計按鈕
      sorId: "",
      sensorIDs: [],
      curID: undefined,
    };
  },
  created() {
    listener.listen("/home", this.resetViewer);
  },
  mounted() {
    setTimeout(() => {
      this.statisticsActive = true;
    }, 200);
    this.intervalFuc();
    this.animationFun();
  },
  beforeDestroy() {
    if (intervalKey) {
      clearInterval(intervalKey);
    }
    if (intervalKey1) {
      clearInterval(intervalKey1);
    }
  },
  methods: {
    resetViewer() {
      this.searchActive = false;
      this.flod = false;
      this.statisticsActive = true;
      this.sorId = "";
    },
    //每隔10分钟请求报警接口
    async animationFun() {
      const that = this;
      intervalKey1 = await setInterval(async () => {
        that.intervalFuc();
      }, 600000); //10分
    },
    //每隔1秒轮巡传感器id组
    async intervalFuc() {
      const that = this;
      const alarm = await alarmData({ sorId: Number(this.sorId) });
      if (alarm.data && alarm.data.rows && alarm.data.rows.length > 0) {
        that.sensorIDs = alarm.data.rows;
      }
      let j = 0;
      intervalKey = setInterval(() => {
        if (j < that.sensorIDs.length) {
          that.curID = that.sensorIDs[j++];
        } else {
          j = 0;
        }
      }, 2000);
    },
    async getData() {
      if (typeof Number(this.sorId) == "string") return;
      const bp = await sensorList({ sorId: Number(this.sorId) });
      if (bp.data && bp.data.rows && bp.data.rows.length == 1) {
        this.$refs.map.zoomTo(bp.data.rows[0]);
        this.flod = false;
      } else {
        this.$message.error("没有查询到" + this.sorId + "传感器数据!");
        this.$refs.map.backHome();
        this.sorId = "";
      }
    },
    resetData() {
      this.sorId = "";
      this.$refs.map.backHome();
      this.$refs.map.closeBulletChange(); //地图复位的同时弹窗关闭
    },
    searchFoldHandler() {
      this.searchActive = !this.searchActive;
      if (!this.searchActive) {
        this.sorId = "";
        this.$refs.map.backHome();
      }
    },
    foldHandler() {
      this.flod = !this.flod;
      if (!this.flod) {
        this.$refs.map.backHome();
      }
    },
    handleClose(item) {
      this.flod = false;
      this.$refs.map.zoomTo(item);
    },
  },
  beforeDestroy() {
    listener.unlisten("/home", this.resetViewer);
  },
};
</script>

<style lang="scss" scoped>
.statistics-leave-active {
  transition: all 0.5s linear;
}

.router-enter-active,
.router-leave-active {
  .left {
    left: -410px !important;
    opacity: 0 !important;
  }

  .right {
    right: -410px !important;
    opacity: 0 !important;
  }
}

.home {
  width: 100%;
  height: 100%;

  .funcArea {
    position: absolute;
    top: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
    z-index: 999;
    height: 60px;
    pointer-events: none;

    .left {
      transition: all 0.3s linear;
      position: relative;
      opacity: 1;
      left: 70px;
      margin-left: 29px;
      pointer-events: all;

      .font {
        width: 290px;
        height: 26px;
        // overflow: hidden; /* 超出部分隐藏 */
        // white-space: nowrap; /* 不换行 */
        // animation: marquee 3s linear 0s infinite normal;
        font-family: "AlibabaPuHuiTi-2-5-Bold";
        font-size: 18px;
        font-weight: 600;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f2a742;
        position: absolute;
        top: 20px;
        left: 60px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .alert {
          color: red;
          width: 47px;
          text-align: center;
        }
      }
    }

    .right {
      transition: all 0.3s linear;
      position: relative;
      opacity: 1;
      right: 0;
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      height: 60px;
      line-height: 60px;
      pointer-events: all;

      .searchContainer {
        width: 380px;
        height: 60px;
        position: relative;

        .inputLable,
        .inputLable:active,
        .inputLable:focus {
          position: relative;
          top: -86px;
          height: 53px;
          right: -32px;
          border-radius: 21px;
          background: transparent;
          border: none;
          font-family: "AlibabaPuHuiTi-2-85-Bold";
          font-size: 18px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #999999;
          outline: none;
          padding: 0;
          margin: 0;
          width: 56%;
        }

        .clearBtn {
          position: absolute;
          top: -1px;
          right: 210px;
          cursor: pointer;
          display: flex;
          color: #fff;
        }

        .title-search-word {
          position: absolute;
          top: -1px;
          right: 10px;
          cursor: pointer;
          display: flex;
          font-family: "AlibabaPuHuiTi-2-85-Bold";
          font-size: 18px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          color: #fff;

          .title-but {
            // background: #00ab9b;
            margin-right: 10px;
            padding-right: 5px;
            border-radius: 5px;
            cursor: pointer;
          }
        }
      }

      .fold,
      .search,
      .statistics {
        cursor: pointer;
        margin-right: 20px;
      }

      margin-right: 66px;
    }
  }
}

// @keyframes marquee {
//   0% {
//     transform: translateX(20%);
//   }
//   100% {
//     transform: translateX(-2%);
//   }
// }
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
</style>
